<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body { margin: 0; }
    .canvas-box { position: relative; width: 160px; height: 160px; }
    .canvas, .canvas-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .canvas-bg { z-index: 1; }
    .canvas-bg:after { content: '\200B'; display: block; height: 0; clear: both; }
    .canvas-bg-children { float: left; width: 32px; height: 32px; }
    .canvas { z-index: 2; display: block; }
  </style>
</head>
<body>
<div class="canvas-box">
  <div class="canvas-bg" id="canvas-bg"></div>
  <canvas class="canvas" id="canvas" width="160" height="160"></canvas>
</div>
<script>
  /* 构建路径 */
  var bg = document.getElementById('canvas-bg');

  /**
   * 计算图片位置
   * @param { string } bgUrl: 图片地址
   * @param { Array<string> } lock
   */
  function recombineShadow(bgUrl, lock){
    var html = '';
    for(var e, f, g, h = lock[0], i = lock[1], j = lock.slice(2), l = 160, m = 160, n = 0; n < j.length; n++){
      e = l / h;
      f = m / i;
      g = '-' + j[n] % h * e + 'px -' + parseInt(j[n] / h) * f + 'px';
      html += '<div class="canvas-bg-children" style="background-image: '
            + bgUrl
            + '; background-position: '
            + g
            + ';"></div>';
    }

    bg.innerHTML = html;
  }

  /**
   * 初始化图片地址
   * @param { string } imageUrl: base64图片|token
   */
  function initLujing(imageUrl){
    if(imageUrl){
      var u = imageUrl.split('|');
      var url = 'url(' + u[0] + ')';
      var lock = atob(u[1]).split('_');
      recombineShadow(url, lock);
    }
  }
</script>
<script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  /* 初始化画布 */
  function initCanvas(){
    var x = [ [30, 30], [130, 30], [30, 130], [130, 130] ];
    ctx.strokeStyle = '#b3b3b3';
    ctx.lineWidth = 3;
    var i = 0, j = x.length;
    while(i < j){
      ctx.beginPath();
      ctx.arc(x[i][0], x[i][1], 20, 0, 2 * Math.PI);
      ctx.stroke();
      i += 1;
    }
    ctx.strokeStyle = '#ff7f00';
    ctx.lineWidth = 5;
  }

  /* 触摸相关事件 */
  var START = 'ontouchstart' in document ? 'touchstart' : 'mousedown';
  var MOVE = 'ontouchmove' in document ? 'touchmove' : 'mousemove';
  var END = 'ontouchend' in document ? 'touchend' : 'mouseup';

  var trace = [];         // 坐标数组
  var startTime = null;   // 开始时间
  var old = null;         // 旧坐标
  var zuobiao = [];       // 坐标路径

  function zuobiaofanwei(x, y){
    if(y >= 0 && y <= 60){
      if(x >= 0 && x <= 60){
        return '1';
      }else if(x >= 100 <= 160){
        return '2';
      }else{
        return null;
      }
    }else if(y >= 100 && y <= 160){
      if(x >= 0 && x <= 60){
        return '3';
      }else if(x >= 100 <= 160){
        return '4';
      }else{
        return null;
      }
    }else{
      return null;
    }
  }

  function onStart(event){
    event.preventDefault();
    startTime = new Date().getTime();
    var x = event.pageX || event.changedTouches && event.changedTouches[0].pageX;
    var y = event.pageY || event.changedTouches && event.changedTouches[0].pageY;
    var sx = Math.round(x);
    var sy = Math.round(y);
    trace.push([sx, sy, 0]);
    //
    var z = zuobiaofanwei(sx, sy);
    if(z !== null && zuobiao.indexOf(z) < 0) zuobiao.push(z);
    //
    old = [sx, sy];
    canvas.addEventListener(MOVE, onMove, false);
    canvas.addEventListener(END, onEnd, false);
  }

  function onMove(event){
    event.preventDefault();
    var x = event.pageX || event.changedTouches && event.changedTouches[0].pageX;
    var y = event.pageY || event.changedTouches && event.changedTouches[0].pageY;
    var t = new Date().getTime();
    var sx = Math.round(x);
    var sy = Math.round(y);
    trace.push([sx, sy, t - startTime]);
    //
    var z = zuobiaofanwei(sx, sy);
    if(z !== null && zuobiao.indexOf(z) < 0) zuobiao.push(z);
    //
    ctx.beginPath();
    ctx.moveTo(old[0], old[1]);
    ctx.lineTo(sx, sy);
    ctx.stroke();
    old = [sx, sy];
  }

  function onEnd(event){
    event.preventDefault();
    var x = event.pageX || event.changedTouches && event.changedTouches[0].pageX;
    var y = event.pageY || event.changedTouches && event.changedTouches[0].pageY;
    var t = new Date().getTime();
    var sx = Math.round(x);
    var sy = Math.round(y);
    trace.push([sx, sy, t - startTime]);
    canvas.removeEventListener(MOVE, onMove);
    canvas.removeEventListener(END, onEnd);
    //
    var z = zuobiaofanwei(sx, sy);
    if(z !== null && zuobiao.indexOf(z) < 0) zuobiao.push(z);

    window.postMessage(JSON.stringify({
      trace: trace,
      zuobiao: zuobiao
    }));
  }

  function initFunction(){
    trace = [];
    startTime = null;
    old = null;
    zuobiao = [];
    canvas.addEventListener(START, onStart, false);
  }
</script>
</body>
</html>